<template>
  <div>
    <el-divider content-position="left">抽取结果</el-divider>

    <el-table v-loading="listLoading" :data="list" size="small">
      <el-table-column label="集群" prop="deptName1" min-width="100" />
      <el-table-column label="事业部" prop="deptName2" min-width="100" />
      <el-table-column label="城市公司" prop="deptName3" min-width="100" />
      <el-table-column label="检查项目" prop="displayName" min-width="150" />
      <el-table-column label="检查项数量" prop="chkitemNum" align="center" />
      <!--
      <el-table-column label="检查开始时间" prop="startTime" min-width="140" />
      <el-table-column label="检查结束时间" prop="latestTime" min-width="140" />
      -->
      <el-table-column label="是否确认" align="center" width="80">
        <el-tag slot-scope="{ row }" size="small" :type="row.isConfirm ? 'primary' : 'info'">{{ row.isConfirm ? '已确认' : '未确认' }}</el-tag>
      </el-table-column>
      <el-table-column label="状态" align="center" width="80">
        <el-tag slot-scope="{ row }" size="small" :type="row.proIsEnable ? 'success' : 'info'">{{ row.proIsEnable ? '正常' : '作废' }}</el-tag>
      </el-table-column>
      <el-table-column label="原因" prop="reason" min-width="100" />
      <el-table-column label="操作" align="center" width="160" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" icon="el-icon-view" @click="openRltChkitem(row)">检查项详情</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-time" @click="$refs.EditTime.open(row)">修改</el-button> -->
          <el-button size="mini" type="text" icon="el-icon-delete" :loading="row.isEnableLoading" @click="toggleIsEnablePro(row)" v-if="row.proIsEnable">作废</el-button>
          <el-button size="mini" type="text" icon="el-icon-refresh-left" :loading="row.isEnableLoading" @click="toggleIsEnablePro(row)" v-else>恢复</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 20px; text-align: right">
      <span v-if="unconfirmedNum" style="font-size: 14px; color: #606266; margin-right: 20px"> 还需确认 {{ unconfirmedNum }} 项 </span>
      <el-popover placement="top" trigger="hover" content="需查看每项检查项详情并确认" v-if="unconfirmedNum">
        <el-button slot="reference">确 定</el-button>
      </el-popover>
      <el-button type="primary" :disabled="listLoading" @click="onSubmit" v-else>确 定</el-button>
    </div>

    <el-dialog title="检查项确认" :visible.sync="showRltChkitem" :close-on-click-modal="false" append-to-body width="80%" @closed="onClosedChkitem">
      <PeRltChkitem ref="PeRltChkitem" @change="isChangeChkitem = true" />
      <div slot="footer">
        <el-button type="primary" @click="confirmRltPro">确 认</el-button>
        <el-button @click="showRltChkitem = false">取 消</el-button>
      </div>
    </el-dialog>

    <EditTime ref="EditTime" v-model="showEditTime" @ok="getList" />
  </div>
</template>
<script>
// 抽取结果-检查项目列表
import { listPePro, enableRltPro, disableRltPro } from '@/api/cqPe/peRecord'
import EditTime from './EditPeRltProTime'
import PeRltChkitem from './PeRltChkitem'
export default {
  components: { EditTime, PeRltChkitem },
  data() {
    return {
      peRecordId: '',
      rltProIds: [], // 本次抽到的项目
      listLoading: false,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 9999
      },
      showEditTime: false,
      showRltChkitem: false,
      isChangeChkitem: false,
      currRltProId: ''
    }
  },
  computed: {
    unconfirmedNum() {
      // 未确认的数量
      return this.list.filter(i => !i.isConfirm).length
    }
  },
  methods: {
    init(data = {}) {
      this.peRecordId = data.peRecordId
      this.rltProIds = data.rltProIds || []
      this.list = []
      this.getList()
    },
    async getList() {
      const { peRecordId, rltProIds } = this
      if (!peRecordId) return this.$message.error('参数错误：peRecordId 不能为空')
      if (!rltProIds.length) return

      // 保留确认状态
      const proConfirmMap = this.list.reduce((o, i) => !void (o[i.rltProId] = i.isConfirm) && o, {})

      const opt = { ...this.queryParams, peRecordId }
      this.listLoading = true
      const res = await listPePro(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return

      let data = res.rows || []
      // 只显示本次抽到的项目
      data = data.filter(i => rltProIds.includes(i.rltProId))
      data.map(i => {
        i.isEnableLoading = false
        // 用于每项确认。作废视为已确认
        i.isConfirm = !i.proIsEnable ? true : proConfirmMap[i.rltProId] || false
      })
      this.list = data
    },
    async toggleIsEnablePro(item) {
      if (item.isEnableLoading) return
      const isEnable = item.proIsEnable ? 0 : 1
      const name = isEnable === 1 ? '启用' : '作废'

      const res1 = await this.$prompt('', `${name}原因`, {
        inputPlaceholder: `请输入${name}原因`,
        inputValidator: val => !!(val || '').trim(),
        inputErrorMessage: `请输入${name}原因`
      }).catch(action => ({ action }))
      if (res1.action !== 'confirm') return

      const reason = (res1.value || '').trim()
      const opt = { rltProId: item.rltProId, isEnable, reason }
      const submitApi = isEnable ? enableRltPro : disableRltPro
      item.isEnableLoading = true
      const res = await submitApi(opt).catch(() => false)
      item.isEnableLoading = false
      if (res === false) return

      this.$message.success(`已${name}`)
      this.getList()
    },
    openRltChkitem(item) {
      this.showRltChkitem = true
      this.isChangeChkitem = false
      const deptName = [item.deptName1, item.deptName2, item.deptName3, item.curProName].filter(i => i).join(' - ')
      const opt = {
        rltProId: item.rltProId,
        proIsEnable: item.proIsEnable,
        deptName
      }
      this.$nextTick(() => {
        this.$refs.PeRltChkitem.init(opt)
        this.currRltProId = item.rltProId
      })
    },
    onClosedChkitem() {
      if (!this.isChangeChkitem) return
      this.getList()
    },
    confirmRltPro() {
      const { currRltProId } = this
      if (!currRltProId) return

      const item = this.list.find(i => i.rltProId === currRltProId)
      if (!item) return

      item.isConfirm = true
      this.showRltChkitem = false
    },
    onSubmit() {
      this.$emit('ok')
    }
  }
}
</script>
